<template>
  <el-card
    :body-style="{ padding: '10px' }"
    style="height: 300px; width: 200px"
  >
    <img :src="image" class="image" style="width: 180px; height: 200px" />
    <div style="padding: 14px">
      <span>{{ Dish_name }}</span>
      <div class="bottom">
        <el-text truncated>功效：{{ category?.slice(1, -1) }}</el-text>
        <el-button text class="button" type="primary" @click="toDetail(id)"
          >详情</el-button
        >
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
defineOptions({
  name: "",
});

const props = defineProps({
  image: String,
  Dish_name: String,
  category: String,
  id: String,
});

let router = useRouter();
const data = ref({
  image: "",
  Dish_name: "",
  category: "",
  id: "",
});

//详情跳转
const toDetail = (id) => {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
};

onMounted(() => {
  console.log(props);
});
</script>

<style scoped lang="scss">
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
